﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <link href="../../css/web-icons-master/css/web-icons.css" rel="stylesheet" />
    <!--样式-->
    <link href="../../css/fontawesome-free/css/all.min.css" rel="stylesheet">
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../css/core.css" rel="stylesheet" />
    <link href="../../css/site.css" rel="stylesheet" />
    <!-- Fonts CSS-->
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/font-awesome/font-awesome.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/web-icons/web-icons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/themify/themify.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/7-stroke/7-stroke.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/glyphicons/glyphicons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/ionicons/ionicons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/material-design/material-design.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/mfglabs/mfglabs.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/open-iconic/open-iconic.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/themify/themify.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/weather-icons/weather-icons.css">
    <link rel="stylesheet" href="http://cdn.admui.com/demo/iframe/2.1.0/fonts/octicons/octicons.css">

</head>

<body>
    <div class="page">
        <div class="page-content">
            <div class="py-15">
                <div class="text-center">
                    <h3>浏览 11 个图标集</h3>
                    <p class="title-desc">Web icons / Font awesome / 7-Stroke / Glyphicons / Ion Icons / Material Design / Mfglabs / Open Iconic / Themify / Weather icons / Octicons</p>
                </div>
            </div>

            <div class="panel">
                <div class="panel-body container-fluid">
                    <div class="row row-lg">
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">web-icons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-dashboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-inbox" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-bell" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-book" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-tag" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-library" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-share" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-reply" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-refresh" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-move" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-chat" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-envelope" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-menu" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-layout" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wb-fullscreen" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="javascript:;" hzy-router="#!查找图标#!views/icons/web-icon.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">font-awesome</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-glass" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-music" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-search" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-envelope-o" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-heart" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-star" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-film" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-check" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-remove" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-signal" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-gear" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-home" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-road" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-download" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-inbox" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-refresh" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon fa-lock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="font-awesome.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">7-stroke</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-cash" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-close" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-bluetooth" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-way" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-wristwatch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-id" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-volume" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-users" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-switch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-scissors" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-wallet" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-safe" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-video" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-upload" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-umbrella" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-tools" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-trash" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon pe-unlock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/7-stroke.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">glyphicons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-tags" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-italic" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-bold" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-font" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-glass" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-envelope" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-music" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-search" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-heart" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-star" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-remove" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-home" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-road" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-time" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-upload" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-inbox" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon glyphicon glyphicon-lock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/glyphicons.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">ionicons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-ios-albums" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-ios-aperture" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-ios-apps" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-ios-barcode" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-alert" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-eye" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-egg" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-document" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-disc" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-cube" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-chatboxes" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-checkmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-clipboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-clock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-close" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-compass" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ion-md-contrast" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/ionicons.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">material-design</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-3d-rotation" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-album" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-archive" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-account" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-alert" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-check" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-o" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-return" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment-returned" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-assignment" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-attachment-alt" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-attachment" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-audio" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-badge-check" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-balance-wallet" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-balance" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-battery-alert" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon md-bike" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/material-design.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">mfglabs</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_up" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_down" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_right" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-arrow_left" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-reorder" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-list" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-reorder_square" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-reorder_square_line" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-coverflow" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-coverflow_line" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-pause" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-play" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-step_forward" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-step_backward" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-data_science" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-globe" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ml-paperplane_ico" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/mfglabs.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">open-iconic</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-align-center" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-align-left" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-align-right" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-aperture" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-audio" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-badge" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-ban" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-basket" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-beaker" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bell" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bluetooth" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bold" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bolt" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-book" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-box" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-briefcase" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon io-browser" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/open-iconic.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">themify</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-wand" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-volume" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-user" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-unlock" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-unlink" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-trash" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-thought" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-target" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-tablet" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-star" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-spray" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-signal" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-settings" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-search" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-cut" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-reload" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon ti-pin" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/themify.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">weather-icons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-cloudy" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-fog" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-hail" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-lightning" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-rain" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-showers" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-snow" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sprinkle" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-thunderstorm" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-windy" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-cloud" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-degrees" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-fahrenheit" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-horizon" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-lightning" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sprinkles" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sunrise" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon wi-sunset" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/weather-icons.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-4 col-sm-6">
                            <h4 class="example-title">octicons</h4>
                            <div class="example example-well overlay overlay-hover">
                                <ul class="blocks-xs-6 m-0">
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-book" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-bookmark" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-clippy" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-dashboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-database" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-file-code" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-file-zip" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-git-branch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-keyboard" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-mark-github" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-organization" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-repo" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-server" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-settings" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-terminal" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-shield" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-versions" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="icondemo">
                                            <i class="icon oi-watch" aria-hidden="true"></i>
                                        </div>
                                    </li>
                                </ul>
                                <div class="overlay-panel overlay-background overlay-fade text-center vertical-align">
                                    <a class="btn btn-outline btn-inverse vertical-align-middle" href="./icons/octicons.html">
                                        查找图标
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>


</body>

</html>